<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>计算屏幕PPI值</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="ppi,PPI,计算PPI值">
	<meta http-equiv="description" content="计算屏幕PPI值">
	<jsp:include page="./common/common_jscss.jsp" />
	<script type="text/javascript">
	   $(function(){
		  $(".normal-rp") .click(function(){
			 var value = $(this).val();
			 var rp = value.split("x");
			 $("#screen-height").val(rp[0]);
			 $("#screen-width").val(rp[1]);
		  });
	   });
	</script>
  </head>
  
  <body>
  	<div class="mix">
    <div class="container p-t-5">
        <div class="mix-panel mix-panel-primary mix-border-radius">
    		<h1 class="mix-header text-center">计算屏幕PPI值</h1>
    		<div class="mix-body">
    		   	<form class="form-horizontal" method="post" role="form" action="ppi">
    		   		<div class="form-group">
					    <label class="col-sm-2 control-label">分辨率：</label>
					    <div class="col-sm-10">
					    	<label class="radio-inline">
							  <input type="radio" class="normal-rp" id="size-720p" ${normalRP == '1280x720'?'checked':'' } name="normalRP" value="1280x720"> 720P
							</label>
							<label class="radio-inline">
							  <input type="radio" class="normal-rp" id="size-768p" ${normalRP == '1366x768'?'checked':'' } name="normalRP" value="1366x768"> 768P
							</label>
							<label class="radio-inline">
							  <input type="radio" class="normal-rp" id="size-1080p" ${normalRP == '1920x1080'?'checked':'' } name="normalRP" value="1920x1080"> 1080P
							</label>
							<label class="radio-inline">
							  <input type="radio" class="normal-rp" id="size-2K" ${normalRP == '2560x1440'?'checked':'' } name="normalRP" value="2560x1440"> 2K
							</label>
							<label class="radio-inline">
							  <input type="radio" class="normal-rp" id="size-2_5K" ${normalRP == '3440x1440'?'checked':'' } name="normalRP" value="3440x1440"> 2.5K
							</label>
							<label class="radio-inline">
							  <input type="radio" class="normal-rp" id="size-4K" ${normalRP == '3840x2160'?'checked':'' } name="normalRP" value="3840x2160"> 4K
							</label>
							<label class="radio-inline">
							  <input type="radio" class="normal-rp" id="size-5K" ${normalRP == '5120x2880'?'checked':'' } name="normalRP" value="5120x2880"> 5K
							</label>
							<label class="radio-inline">
							  <input type="radio" class="normal-rp" id="size-6K" ${normalRP == '6000x4000'?'checked':'' } name="normalRP" value="6000x4000"> 6K
							</label>
							<label class="radio-inline">
							  <input type="radio" class="normal-rp" id="size-8K" ${normalRP == '7680x4320'?'checked':'' } name="normalRP" value="7680x4320"> 8K
							</label>
					    </div>
					</div>
    		   		<div class="form-group">
					    <label for="screen-height" class="col-sm-2 control-label">屏幕高度(像素)：</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="screen-height" name="screenHeight" value="${ppiBean.screenHeight}" placeholder="请输入屏幕高度" />
					    </div>
					</div>
					<div class="form-group">
					   <label for="screen-width" class="col-sm-2 control-label">屏幕宽度(像素)：</label>
					   <div class="col-sm-10">
					     <input type="text" class="form-control" id="screen-width" name="screenWidth" value="${ppiBean.screenWidth}" placeholder="请输入屏幕宽度" />
					   </div>
					</div>
					
					<div class="form-group">
					   <label for="screen-size" class="col-sm-2 control-label">屏幕大小(英寸)：</label>
					   <div class="col-sm-10">
					     <input type="text" class="form-control" id="screen-size" name="screenSize" value="${ppiBean.screenSize}" placeholder="请输入屏幕大小(英寸)" />
					   </div>
					</div>
					<div class="form-group">
					   <label for="screen-size" class="col-sm-2 control-label">PPI值：</label>
					   <div class="col-sm-5">
					   	 <p class="form-control-static text-bold">${ppiBean.ppi} <span class="help-block text-inline">（正常人的视网膜PPI为：325）</span></p>
					   </div>
					   <c:if test="${not empty msg }">
					   		<div class="col-sm-5">
					   			<p class="form-control-static text-bold color-red">${msg}</p>
					   		</div>
					   </c:if>
					</div>
					<div class="form-group">
						<div class="col-sm-2 col-sm-offset-5">
							<button type="submit" class="btn btn-primary btn-block"><i class="fa fa-calculator" aria-hidden="true"></i> 计算</button>
						</div>
					</div>
    		   	</form>
    		</div>
    	</div>
    </div>
    </div><!--end mix-->
    
  </body>
</html>
